<template>
    <div>
        <div class="login_header">
            <!-- <p class="login_title">点餐平台</p>
            <p>登录后开启快捷点餐之旅~</p> -->
            <div class="title">
                <i class="iconfont icon-daxueshidai- logo"></i>
                <p>运营{{$route.query.id == 1?'结算员':$route.query.id == 2?'装箱员':$route.query.id == 3?'楼栋管理员':'大配送员'}}管理</p>
            </div>
        </div>
        <div class="login-content">
            <div class="input-content">
                <input type="number" v-model="phone" placeholder="请输入结算员后台绑定手机号码">
            </div>
            <div class="code-content">
                <div class="input-content code-input">
                    <input v-model="Code" type="number" oninput="if(value.length>6)value=value.slice(0,6)" placeholder="请输入手机验证码">
                </div>
                <mt-button plain type="danger" @click.native="getPhoneCode" :disabled='disabled'>{{codeText}}</mt-button>
            </div>
            <div class="code-content">
                <mt-button size="large" type="danger" @click.native="Login">登录</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { SendMsg,login } from '../api'
import cookie from '../cookie'
export default {
    name:'login',
    data() {
        return {
            codeText:"获取验证码",
            phone:'',
            Code:'',
            type:"A",
            disabled:false
        }
    },
    created(){
        console.log(cookie.get("data","roleinfo"));
        console.log(cookie.get("data","token"));
    },
    methods:{
        getPhoneCode(){
            // console.log(this.phone);
            if(!this.phone){
                Toast("请输入手机号码获取验证码");
                return;
            }else if(!(/^1[3456789]\d{9}$/.test(this.phone))){
                Toast("手机号码格式错误");
                return;
            }
            const data = {
                    phone:this.phone,
                    type:this.type
            }
            SendMsg(data).then(res=>{
                if(res.code == 200){
                    Toast('验证码发送成功')
                    let time = 60;
                    let timer = setInterval(()=>{
                        if(time>0){
                            time --;
                            this.codeText = `再次获取(${time})`
                            this.disabled = true;
                        }else{
                            this.disabled = false;
                            this.codeText = '再次获取';
                            clearInterval(timer);
                        }
                    },1000)
                }
            })
        },
        Login(){
            const {phone , Code } = this;
            const data ={phone,Code,type:3,types:this.$route.query.id}
            login(data).then(res=>{
                if(res.code == 200){
                    cookie.set('data','roleinfo',JSON.stringify(res.data.roleinfo),res.data.expires_time);
                    cookie.set('data','token',res.data.token,res.data.expires_time);
                    // console.log(res.data.roleinfo);return;
                    if(res.data.roleinfo.type == 1){
                        this.$router.push('/index');
                    }else if(res.data.roleinfo.type == 2){
                       this.$router.push('/boxIndex'); 
                    }else if(res.data.roleinfo.type == 3){
                        this.$router.push('/towerIndex');
                    }else if(res.data.roleinfo.type == 4){
                       this.$router.push('/beliverymanIndex'); 
                    }
                }else{
                    Toast(res.msg);
                }
            })
        }
    }
}
</script>
<style scoped>
       .login_header{
        width: 100%;
        height:9rem;
        background-image: url('../assets/header_bg.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #fff;
        text-align: center;
        font-size: 0.8rem;
    }
    .login_header::before{
        content: "";
        display: table;
    }
    .title{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.5rem;
        line-height: 8rem;
        font-weight: bolder;
    }
    .logo{
        font-size: 4rem;
        padding: 0 0.4rem;
        /* line-height: 8rem; */
    }
    .code-content{
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .code-input {
        width: 50%;
        position: relative;
    }
</style>